<template>
    <view class="container">
        <cu-custom style="height: 0px;" class="navBox" bgColor="bg-gradual-blue" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">汇总分析</block>
        </cu-custom>
        
        <!-- 头部开始 -->
		<view style="height: auto;width: 100%;color: black;">
			 <view class="goods-header-wrap">
				 <!-- 根据 shouldShowDevice 决定是否显示设备导航项 -->
				 <view class="goods-header-item" :class="{'goods-header-item-active' : 1 == goodsNav}" @click="setNav(1)" v-if="shouldShowDevice">设备</view>
				 <!-- 根据 shouldShowOrder 决定是否显示工单导航项 -->
				 <view class="goods-header-item" :class="{'goods-header-item-active' : 2 == goodsNav}" @click="setNav(2)" v-if="shouldShowOrder">工单</view>
				 <!-- 根据 shouldShowPatrol 决定是否显示巡检导航项 -->
				 <view class="goods-header-item" :class="{'goods-header-item-active' : 3 == goodsNav}" @click="setNav(3)" v-if="shouldShowPatrol">巡检</view>
			 </view>
		</view>
		<view class="goodsNavContent" style="padding-top: 12rpx;">
			<view class="stat-section device-stats" style="padding-bottom: 0rpx !important;">
				<view class="charts-box" style="width: 100%;overflow: hidden">
					<view style="height: auto;;color: black;">
						<view class="goods-header-wrap" style="padding-top: 10rpx;">
							<view class="goods-header-item1" :class="{'goods-header-item-active' : 1 == goodsNav1}" @click="setNav1(1)">日
							</view>
							<view class="goods-header-item1" :class="{'goods-header-item-active' : 2 == goodsNav1}" @click="setNav1(2)">周
							</view>
							<view class="goods-header-item1" :class="{'goods-header-item-active' : 3 == goodsNav1}" @click="setNav1(3)">月
							</view>
							<view class="goods-header-item1" :class="{'goods-header-item-active' : 4 == goodsNav1}" @click="setNav1(4)">季
							</view>
							<view class="goods-header-item1" :class="{'goods-header-item-active' : 5 == goodsNav1}" @click="setNav1(5)">年
							</view>
						</view>
					</view>
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA" @touchend="moveLineA"></canvas>
				</view>
			</view>
		</view>
        <view class="goodsNavContent" v-if="goodsNav==1">
            <!-- 设备状态统计 -->
            <view class="stat-section device-stats" style="margin-top: 20rpx;margin-bottom: 12rpx;">
				<view v-for="(item,indexc) in DevicePanel" class="stat-item" :class="item.bgColorClass">
					<text class="label">{{item.title}}</text>
					<text class="value" :class="item.colorClass">{{item.counts}}</text>
				</view>
            </view>
            <!-- 工单统计 -->
			<view class="stat-section-father">
				<view class="stat-section-title">工单</view>
				<view class="stat-section order-stats">
				    <view class="stat-item">
				        <text class="label">总工单</text>
				        <text class="value blue">{{SceneCounts.SceneTotal}}</text>
				    </view>
				    <view class="stat-item">
				        <text class="label">处理中</text>
				        <text class="value orange">{{SceneCounts.SceneHandel}}</text>
				    </view>
				    <view class="stat-item">
				        <text class="label">已完成</text>
				        <text class="value green">{{SceneCounts.SceneEnd}}</text>
				    </view>
				</view>
			</view>
            <view class="stat-section-father">
				<view class="stat-section-title">巡检</view>
				<view class="stat-section order-stats">
					<view class="stat-item">
						<text class="label">总数</text>
						<text class="value blue">{{SignCounts.SignTotal}}</text>
					</view>
					<view class="stat-item">
						<text class="label">异常数</text>
						<text class="value red">{{SignCounts.SignError}}</text>
					</view>
					<view class="stat-item">
						<text class="label">正常数</text>
						<text class="value green">{{SignCounts.SignNormal}}</text>
					</view>
				</view>    
            </view>  
        </view>
		
		<view class="goodsNavContent" v-if="goodsNav==2">
		    <!-- 设备状态统计 -->
		    <view class="stat-section device-stats" style="margin-top: 20rpx;margin-bottom: 12rpx;">
				<view v-for="(item,indexc) in QrodeScenePanelList" class="stat-item" :class="item.bgColorClass">
					<text class="label">{{item.title}}</text>
					<text class="value" :class="item.colorClass">{{item.counts}}</text>
				</view>
		    </view>
			
			<view class="stat-section device-stats stat-section-father" style="margin-top: 12rpx;">
					<view class="stat-section-title">工单完成比</view>
					<canvas canvas-id="QrcodeSceneCompletionStatus" id="QrcodeSceneCompletionStatus" class="charts" @touchend="tap"/>
			</view>
			<view class="stat-section device-stats stat-section-father" style="margin-top: 20rpx;">
					<view class="stat-section-title">工单分类占比</view>
					<canvas canvas-id="QrcodeSceneTypeStatus" id="QrcodeSceneTypeStatus" class="charts" @touchend="tap"/>
			</view>
			<view class="stat-section device-stats stat-section-father" style="margin-top: 20rpx;">
					<view class="stat-section-title">人员工单量（前6）</view>
				<canvas canvas-id="JinxRDWiCvVUBgwBgCqtshpHTzDNhPCG" id="JinxRDWiCvVUBgwBgCqtshpHTzDNhPCG" class="charts" @touchend="tapLine"/>
			</view>
		</view>
		<view class="goodsNavContent" v-if="goodsNav==3">
			<!-- 巡检面板状态统计 -->
			<view class="stat-section device-stats" style="margin-top: 20rpx;margin-bottom: 12rpx;">
				<view v-for="(item,indexc) in QrcodeSignPanel" class="stat-item" :class="item.bgColorClass">
					<text class="label">{{item.title}}</text>
					<text class="value" :class="item.colorClass">{{item.counts}}</text>
				</view>
			</view>
			<view class="stat-section device-stats stat-section-father" style="margin-top: 20rpx;">
					<view class="stat-section-title">巡检结果占比</view>
					<canvas canvas-id="QrcodeSignStatus" id="QrcodeSignStatus" class="charts" @touchend="tap"/>
			</view>
		</view>
    </view>
</template>
<script>
    // 图表
	import request from '@/common/request.js';
    import uCharts from "@/pages-others/components/ucharts3.6/u-charts.js";
    var _self; //用于全局使用this
    var canvaLineA = null; //uCharts实例
	var uChartsInstance = {};
    export default {
        name: 'StatisticsCard',
        data() {
            return {
                goodsNav:1,
                goodsNav1:3,
                cWidth: '',
                cHeight: 400, // 修改为400
                chartData: { //数据
                    // categories: ["2012", "2013", "2014", "2015", "2016", "2017"],
                    // series: [{
                    //     name: "工单数",
                    //     data: [35, 8, 25, 37, 4, 20]
                    // }]
					categories: [],
					series: [{
					    name: "工单数",
					    data: []
					}]
                },
				chartData1:{
					categories: [],
					series: [{
					    name: "巡检次数",
					    data: []
					}]
				},
				DevicePanel:[],
				QrcodeSignPanel:[],
				QrodeScenePanelList:[],
				SceneCounts:{
					SceneTotal:0,
					SceneHandel:0,
					SceneEnd:0,
				},
				SignCounts:{
					SignTotal:0,
					SignError:0,
					SignNormal:0,
				},
				bingData1:[],
				bingData2:[],
				bingData3:[],
				Top10QrcodeUserQrcodeSceneOrder:{},
				shouldShowDevice: true,
				shouldShowOrder: false,
				shouldShowPatrol: false
            }
        },
        onLoad() {
            this.cWidth = uni.upx2px(750);
            this.cHeight = uni.upx2px(400); // 修改为400
            _self = this //声明this
			
			this.updateMenu();
			//this.getApiData();
			// uni.getStorage({
			// 	key: 'userdata',
			// 	success: (resuserdata) => {
			// 		let MiniProgramMenu = resuserdata.data.MiniProgramMenu;
			// 		if (MiniProgramMenu) {
			// 			let MiniProgramMenuEntity = JSON.parse(MiniProgramMenu);
			// 			let shujutongji = MiniProgramMenuEntity.buttons.home[0].shujutongji;
			// 			let summary = shujutongji.summary;
			// 			if (summary && summary.length > 0) {
			// 				this.shouldShowDevice = summary.includes('device_analysis');
			// 				this.shouldShowOrder = summary.includes('order_analysis');
			// 				this.shouldShowPatrol = summary.includes('patrol_analysis');
			// 			}
			// 			// 根据实际显示的导航项调整 goodsNav
			// 			if (this.shouldShowDevice) {
			// 				this.goodsNav = 1;
			// 			} else if (this.shouldShowOrder) {
			// 				this.goodsNav = 2;
			// 			} else if (this.shouldShowPatrol) {
			// 				this.goodsNav = 3;
			// 			}
			// 		}
			// 		// 调用获取数据的方法
			// 		this.getApiData();
			// 		if (this.goodsNav === 2) {
			// 			this.getQrcodeSceneData();
			// 			this.GetTop10QrcodeUserQrcodeSceneOrder();
			// 		} else if (this.goodsNav === 3) {
			// 			this.GetQrcodeSignData();
			// 		}
			// 	},
			// 	fail: () => {
			// 		// 缓存获取失败，默认显示所有数据
			// 		this.getApiData();
			// 	}
			// });
        },
        mounted() {
			//this.getQrcodeSceneData();
        },
        methods:{
			updateMenu(){
				let that=this
				let opts = {
					url: 'api/GetMiniProgramMenu',
					method: 'post'
				};
				request.httpTokenNotCheckRequest(opts).then(res => {
					if(res.data.code == 1){
						var MiniProgramMenu=res.data.data.MiniProgramMenu
						
						if(MiniProgramMenu){
							let MiniProgramMenuEntity=JSON.parse(MiniProgramMenu)
							let shujutongji=MiniProgramMenuEntity.buttons.home[0].shujutongji
							let summary = shujutongji.summary;
							if (summary && summary.length > 0) {
								that.shouldShowDevice = summary.includes('device_analysis');
								that.shouldShowOrder = summary.includes('order_analysis');
								that.shouldShowPatrol = summary.includes('patrol_analysis');
							}
							// 根据实际显示的导航项调整 goodsNav
							if (that.shouldShowDevice) {
								that.goodsNav = 1;
							} else if (that.shouldShowOrder) {
								that.goodsNav = 2;
							} else if (that.shouldShowPatrol) {
								that.goodsNav = 3;
							}
							// 调用获取数据的方法
							this.getApiData();
							if (this.goodsNav === 2) {
								this.getQrcodeSceneData();
								this.GetTop10QrcodeUserQrcodeSceneOrder();
							} else if (this.goodsNav === 3) {
								this.GetQrcodeSignData();
							}
						}else{
							this.getApiData();
						}
					}else{
						this.getApiData();
					}
				});	
			},
			loadQrcodeUserSceneCounts() {
			    // 模拟从服务器获取数据时的延时
			    setTimeout(() => {
			        this.drawHorizontalLine('JinxRDWiCvVUBgwBgCqtshpHTzDNhPCG', this.Top10QrcodeUserQrcodeSceneOrder);
			    }, 500);
			},
			
			drawHorizontalLine(id, data) {
			    const ctx = uni.createCanvasContext(id, this);
			    uChartsInstance[id] = new uCharts({
			        type: "bar",
			        context: ctx,
			        width: this.cWidth,
			        height: this.cHeight,
			        categories: data.categories,
			        series: data.series,
			        animation: true,
			        background: "#FFFFFF",
			        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			        padding: [15, 30, 0, 5],
			        enableScroll: false,
			        legend: {},
			        xAxis: {
			            boundaryGap: "justify",
			            disableGrid: false,
			            min: 0,
			            axisLine: false,
			            max: 40
			        },
			        yAxis: {},
			        extra: {
			            bar: {
			                type: "group",
			                width: 14, // 将柱子宽度调整为 20
			                meterBorde: 1,
			                meterFillColor: "#FFFFFF",
			                activeBgColor: "#000000",
			                activeBgOpacity: 0.08,
			                linearType: "custom",
			                barBorderCircle: true,
			                seriesGap: 2,
			                categoryGap: 2,
			            },
			        }
			    });
			},
			async loadBing() {
				//console.log('loadBing')
			    let res1 = {series: [{data: this.bingData1}]};
			    let res2 = {series: [{data: this.bingData2}]};
			    let color1= ["#91CB74","#1890FF","#FAC858",]
			    let color2= ["#91CB74","#1890FF","#FAC858",]
			    let color3= ["#91CB74","#EE6666","#DEDCE5",]
			    // "#91CB74","#1890FF","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"
				//   setTimeout(() => {
					// this.$nextTick(() => {
					// 	this.drawCharts('QrcodeSceneCompletionStatus', res1,'',color1);
					// 	await this.delay(100);
					// 	this.drawCharts('QrcodeSceneTypeStatus', res2,'',color2);
					// 	await this.delay(100);
					// });
				//   }, 500); // 增加延迟确保渲染
				if(this.goodsNav==1||this.goodsNav==2){
					this.drawCharts('QrcodeSceneCompletionStatus', res1,'',color1);
					await this.delay(100);
					this.drawCharts('QrcodeSceneTypeStatus', res2,'',color2);
					await this.delay(100);
				}
				if(this.goodsNav==3){
					let res3 = {series: [{data: this.bingData3}]};
					this.drawCharts('QrcodeSignStatus', res3,'',color3);
					await this.delay(100);
				}
			},
			// 添加延迟方法
			delay(ms) {
			  return new Promise(resolve => setTimeout(resolve, ms));
			},
			drawCharts(id, data,title,color) {
			    const ctx = uni.createCanvasContext(id, this);
				// 根据屏幕宽度动态调整圆环半径和内圆半径
				const screenWidth = uni.getSystemInfoSync().windowWidth;
				console.log('screenWidth：'+screenWidth)
				const baseRadius = screenWidth * 0.3; // 以屏幕宽度的30%作为基础半径
				console.log('baseRadius：'+baseRadius)
				const ringWidth = 20; // 圆环宽度
				const innerRadius = baseRadius - ringWidth; // 内圆半径
				console.log('innerRadius：'+innerRadius)
				
			    // 计算右侧图例需要的最小宽度
				const legendWidth = 40; // 假设图例的最小宽度为100，可根据实际情况调整
				const availableWidth = screenWidth - legendWidth; // 圆环可占用的宽度
				// 调整基础半径以适应可用宽度
				const adjustedRadius = Math.min(baseRadius, availableWidth / 2);
			    uChartsInstance[id] = new uCharts({
			        type: "ring",
			        context: ctx,
			        width: this.cWidth,
			        height: this.cHeight,
			        series: data.series,
			        animation: true,
			        rotate: false,
			        rotateLock: false,
			        background: "#FFFFFF",
			        color:color,
			        padding: [5, legendWidth, 5, 5], 
			        dataLabel: true,
			        enableScroll: false,
			        legend: {
			            show: true,
			            // 设置图例垂直排列
			            orient: 'vertical', 
			            // 图例靠右显示
			            right: 10, 
			            // 图例垂直居中
			            top: 'center', 
			            lineHeight: 35,
			            position: "right",
			            // 自定义图例文本格式
			            formatter: function (name) {
			                const seriesData = data.series[0].data;
			                for (let i = 0; i < seriesData.length; i++) {
			                    if (seriesData[i].name === name) {
			                        return `${name}：${seriesData[i].value}`;
			                    }
			                }
			                return name;
			            }
			        },
			        title: {
			            name: title,
			            fontSize: 14,
			            color: "#666666"
			        },
			        subtitle: {
			            name: "",
			            fontSize: 16,
			            color: "#7cb5ec"
			        },
			        extra: {
			            ring: {
			                ringWidth: ringWidth, // 圆环宽度，即圆环的厚度
							activeOpacity: 0.5, // 激活时的透明度，当鼠标悬停在圆环某部分时的透明度
							activeRadius: 10, // 激活时的半径增加量，可按需调整
							offsetAngle: 0, // 圆环起始角度的偏移量
							labelWidth: 15, // 数据标签的宽度
							border: false, // 是否显示圆环的边框
							borderWidth: 3, // 边框的宽度
							borderColor: "#FFFFFF", // 边框的颜色
							// 以下新增设置固定半径相关
							radius: adjustedRadius, 
							innerRadius: adjustedRadius - ringWidth, 
			            }
			        }
			    });
			},
			tap(e) {
			    uChartsInstance[e.target.id].touchLegend(e);
			    uChartsInstance[e.target.id].showToolTip(e);
			},
			tapLine(e) {
			    uChartsInstance[e.target.id].touchLegend(e);
			    uChartsInstance[e.target.id].showToolTip(e);
			},
			loadCharts() {
			  setTimeout(() => {
			    this.$nextTick(() => {
			      // 确保DOM更新后执行 
			      const ctx = uni.createCanvasContext('canvasLineA',  this);
			      this.showLineA("canvasLineA",  this.chartData,  ctx);
			    });
			  }, 500); // 增加延迟确保渲染 
			},
			loadCharts1() {
			  setTimeout(() => {
			    this.$nextTick(() => {
			      // 确保DOM更新后执行 
			      const ctx = uni.createCanvasContext('canvasLineA',  this);
			      this.showLineA("canvasLineA",  this.chartData1,  ctx);
			    });
			  }, 500); // 增加延迟确保渲染 
			},
            setNav(goodsNav) {
                let that=this
                that.goodsNav = goodsNav
				if(goodsNav==1){
					that.getApiData()
				}
				if(goodsNav==2){
					that.getApiData()
					that.getQrcodeSceneData();
					that.GetTop10QrcodeUserQrcodeSceneOrder()
				}
				if(goodsNav==3){
					that.GetQrcodeSignData()
				}
            },
            setNav1(goodsNav) {
                let that=this
                that.goodsNav1 = goodsNav
				if(that.goodsNav==1){
					that.getApiData()
				}
				if(that.goodsNav==2){
					that.getApiData()
					that.getQrcodeSceneData();
					that.GetTop10QrcodeUserQrcodeSceneOrder()
				}
				if(that.goodsNav==3){
					that.GetQrcodeSignData()
				}
            },
			GetQrcodeSignData(){
				let that=this
				uni.showLoading({
					title:"加载中..."
				})
				let opts = {
					url: 'MobileReportApi/GetQrcodeSignData',
					method: 'post'
				};
				let requestData={
					type:that.goodsNav,
					cycleTime:that.goodsNav1,
				}
				request.httpTokenRequest(opts,requestData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						if(res.data.data.Charts){
							//console.log('Charts:'+JSON.stringify(res.data.data.Charts));
							let x=res.data.data.Charts.x
							let y=res.data.data.Charts.y
							that.chartData1.categories=x
							that.chartData1.series[0].name='巡检次数';
							that.chartData1.series[0].data=y;
							//console.log('that.chartData1:'+JSON.stringify(that.chartData1));
							that.loadCharts1()
						}
						//QrcodeSignPanel
						if(res.data.data.QrcodeSignPanel){
							that.QrcodeSignPanel=res.data.data.QrcodeSignPanel
						}
						if(res.data.data.QrcodeSignBingData){
							that.bingData3=[]
							if(res.data.data.QrcodeSignBingData){
								let bingData33=[]
								let item1={name: "正常："+res.data.data.QrcodeSignBingData.QrcodeSignNormal, value: res.data.data.QrcodeSignBingData.QrcodeSignNormal}
								let item2={name: "异常："+res.data.data.QrcodeSignBingData.QrcodeSignError, value: res.data.data.QrcodeSignBingData.QrcodeSignError}
								let item3={name: "未知："+res.data.data.QrcodeSignBingData.QrcodeSigUnknown, value: res.data.data.QrcodeSignBingData.QrcodeSigUnknown}
								bingData33.push(item1)
								bingData33.push(item2)
								bingData33.push(item3)
								that.bingData3=bingData33
								that.loadBing()
							}
						}
					}
				})
			},
			GetTop10QrcodeUserQrcodeSceneOrder(){
				let that=this
				uni.showLoading({
					title:"加载中..."
				})
				let opts = {
					url: 'MobileReportApi/GetTop10QrcodeUserQrcodeSceneOrder',
					method: 'post'
				};
				let requestData={
					type:that.goodsNav,
					cycleTime:that.goodsNav1,
				}
				request.httpTokenRequest(opts,requestData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						// categories: ["2018","2019","2020","2021","2022","2023"],
						// series: [
						//   {
						// 	name: "目标值",
						// 	data: [35,32,31,11,10,4]
						//   }
						// ]
						that.bingData1=[]
						if(res.data.data.Top10QrcodeUserQrcodeSceneOrder){
							let series=[]
							let seriesone={
								name:res.data.data.Top10QrcodeUserQrcodeSceneOrder.name,
								data:res.data.data.Top10QrcodeUserQrcodeSceneOrder.data
							}
							series.push(seriesone)
							that.Top10QrcodeUserQrcodeSceneOrder.categories=res.data.data.Top10QrcodeUserQrcodeSceneOrder.categories
							that.Top10QrcodeUserQrcodeSceneOrder.series=series
							//console.log('that.Top10QrcodeUserQrcodeSceneOrder:'+JSON.stringify(that.Top10QrcodeUserQrcodeSceneOrder))
							that.loadQrcodeUserSceneCounts()
						}
					}
				})
			},
			getQrcodeSceneData(){
				let that=this
				uni.showLoading({
					title:"加载中..."
				})
				let opts = {
					url: 'MobileReportApi/GetQrcodeSceneBingTwo',
					method: 'post'
				};
				let requestData={
					type:that.goodsNav,
					cycleTime:that.goodsNav1,
				}
				request.httpTokenRequest(opts,requestData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.bingData1=[]
						if(res.data.data.SceneBingData1){
							// { name: "已完成", value: 50 },
							// { name: "进行中", value: 30 },
							// { name: "待处理", value: 20 }, 
							let bingData1=[]
							let item1={name: "已完成："+res.data.data.SceneBingData1.SceneEnd, value: res.data.data.SceneBingData1.SceneEnd}
							let item2={name: "处理中："+res.data.data.SceneBingData1.SceneHandeling, value: res.data.data.SceneBingData1.SceneHandeling}
							let item3={name: "待处理："+res.data.data.SceneBingData1.SceneHandel, value: res.data.data.SceneBingData1.SceneHandel}
							bingData1.push(item1)
							bingData1.push(item2)
							bingData1.push(item3)
							that.bingData1=bingData1
						}
						that.bingData2=[]
						if(res.data.data.SceneBingData2){
							//console.log('aaaa:'+JSON.stringify(res.data.data.SceneBingData2));
							for(let i=0;i<res.data.data.SceneBingData2.length;i++){
								let en=res.data.data.SceneBingData2[i]
								let entity={
									name:en.title+"："+en.counts,
									color:en.color,
									value:en.counts,
								}
								that.bingData2.push(entity)
							}
						}
						if(that.goodsNav==2){
							that.loadBing()
							that.loadQrcodeUserSceneCounts()
						}
						if(res.data.data.QrodeScenePanelList){
							that.QrodeScenePanelList=res.data.data.QrodeScenePanelList
						}
					}
				})
			},
			getApiData(){
				let that=this
				uni.showLoading({
					title:"加载中..."
				})
				let opts = {
					url: 'MobileReportApi/TotalReprotData',
					method: 'post'
				};
				let requestData={
					type:that.goodsNav,
					cycleTime:that.goodsNav1,
				}
				request.httpTokenRequest(opts,requestData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						// data: { //数据
						//     categories: ["2012", "2013", "2014", "2015", "2016", "2017"],
						//     series: [{
						//         name: "工单数",
						//         data: [35, 8, 25, 37, 4, 20]
						//     }]
						// }
						if(res.data.data.Charts){
							//console.log('Charts:'+JSON.stringify(res.data.data.Charts));
							let x=res.data.data.Charts.x
							let y=res.data.data.Charts.y
							that.chartData.categories=x
							that.chartData.series[0].name='工单数';
							that.chartData.series[0].data=y;
							//console.log('that.chartData:'+JSON.stringify(that.chartData));
						}
						
						if(res.data.data.DevicePanel){
							that.DevicePanel=res.data.data.DevicePanel
						}
						// SceneCounts:{
						// 	SceneTotal:0,
						// 	SceneHandel:0,
						// 	SceneEnd:0,
						// }
						if(res.data.data.SceneCounts){
							that.SceneCounts.SceneTotal=res.data.data.SceneCounts.SceneTotal
							that.SceneCounts.SceneHandel=res.data.data.SceneCounts.SceneHandel
							that.SceneCounts.SceneEnd=res.data.data.SceneCounts.SceneEnd
						}    
						// SignCounts:{
						// 	SignTotal:0,
						// 	SignError:0,
						// 	SignNormal:0,
						// }
						if(res.data.data.SignCounts){
							that.SignCounts.SignTotal=res.data.data.SignCounts.SignTotal
							that.SignCounts.SignError=res.data.data.SignCounts.SignError
							that.SignCounts.SignNormal=res.data.data.SignCounts.SignNormal
						}
						//console.log("that.goodsNav:"+that.goodsNav)
						if(that.goodsNav==1||that.goodsNav==2){
							that.loadCharts()
						}
					}
				})
			},
			loadCharts(){
				setTimeout(() => {
					const ctx = uni.createCanvasContext('canvasLineA', this.$el);
					this.showLineA("canvasLineA", _self.chartData, ctx);
				}, 100);
			},
            showLineA(canvasId, chartData, ctx) {
                canvaLineA = new uCharts({ 
                    $this: _self, 
                    canvasId: canvasId, 
                    type: 'line', 
                    colors: ['#facc14', '#f04864', '#90ed7d'], 
                    fontSize: 11, 
                    padding: [15, 15, 15, 15], 
                    legend: { 
                        show: true,
                        padding: 5,
                        lineHeight: 11,
                        margin: 0,
                    },
                    dataLabel: false, 
                    categories: chartData.categories, 
                    series: chartData.series, 
                    xAxis: { 
                        gridColor: '#ebebeb', 
                        //gridType: 'dash', 
                        dashLength: 8, 
						grid: false,
                    },
                    yAxis: { 
                        //gridType: 'dash',
                        gridColor: '#ebebeb',
                        dashLength: 8,
						grid: false 
                    },
                    width: _self.cWidth, 
                    height: _self.cHeight, 
                    extra: { 
                        line: {
                            type: 'curve' 
                        }
                    },
                    context: ctx // 传入绘图上下文
                });
            },
            moveLineA(e) {
                canvaLineA.showToolTip(e, { 
                    format: function(item, category) {
                        return category + ' ' + item.name + ':' + item.data
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        background-color: #f5f5f5;
		.stat-section-father{
			background-color: #ffffff;
            margin-bottom: 20rpx;
			padding-top: 30rpx;
			.stat-section-title{
				font-size: 30rpx;
				padding-left: 20rpx;
				font-color: #333;
				font-weight: 700;
			}
		}
        .stat-section {
            margin-top: 20rpx;
            background-color: #ffffff;
            border-radius: 16rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            
            /* 启用 flex 布局 */
            display: flex;
            /* 允许子元素换行 */
            flex-wrap: wrap;
            /* 消除子元素间的间隙 */
            margin: -5px;
            box-sizing: border-box;
            
            
        
            .section-title {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
                color: #333;
            }
            .stat-row {
                display: flex;
                justify-content: space-between;
                margin-bottom: 15px;
            }
            .stat-item {
                border-radius: 8rpx;
                /* 子元素占据剩余空间 */
                flex: 0 0 calc(33.333% - 10px);
                //flex: 0 0 calc(25% - 10px);
                /* 设置子元素的内边距 */
                padding: 10px;
                /* 设置子元素的外边距 */
                margin: 5px;
                /* 设置子元素的背景颜色 */
                //background-color: #e0e0e0;
                /* 设置子元素的文本对齐方式 */
                text-align: center;
                box-sizing: border-box;
                
                .label {
                    font-size: 14px;
                    color: #666;
                    margin-bottom: 5px;
                    display: block;
                }
                .value {
                    font-size: 24px;
                    font-weight: bold;
                    color: #333;
                    display: block;
                    &.green {
                        color: #56B557;
                    }
                    &.blue {
                        color: #1890ff;
                    }
                    &.orange {
                        color: #ECA444;
                    }
                    &.red {
                        color: #f5023d;
                    }
                    &.gray {
                        color: #999;
                    }
                    &.yellow {
                        color: #ffd700;
                    }
					//purple
                    &.purple {
                        color: #382C76;
                    }
                }
            }
        }
        .device-stats,
        .fund-stats {
            display: flex;
            justify-content: space-between;
        }
    }
    .bg-green-own {
        background-color: #E9F0E9;
    }
    .bg-blue-own {
        background-color: #E4EEF6;
    }
    .bg-orange-own {
        background-color: #F5EFE7;
    }
    .bg-red-own {
        background-color: #F6E2E7;
    }
    .bg-gray-own {
        background-color: #EEEEEE;
    }
    .bg-yellow-own {
        background-color: #F6F3E2;
    }
    .bg-purple-own {
        background-color: #E6E6EB;
    }
    .goods-header-wrap {
        display: flex;
        align-items: center;
        padding: 24rpx;
        background: #FFFFFF;
        margin-bottom: 10rpx;
        justify-content: center; /* 让子元素水平居中 */
    }
    .goods-header-item{
        width:33%;
        text-align: center;
    }
    .goods-header-item1{
        width:100rpx;
        text-align: center;
        //margin: 0 auto; /* 让元素在父容器中水平居中 */
    }
    .goods-header-item-active{
        font-size: 30rpx;
        font-color: #333333;
        font-weight: bold;
        position: relative;
    }
    .goods-header-item-active::after{
        position: absolute;
        left: 50%;
        right: 0;
        background: #4372fe;
        height: 8rpx;
        content: "";
        bottom: -12rpx;
        width: 60rpx;
        margin-left: -30rpx;
        border-radius: 200rpx;
    }
    .goods-header-item-action {
        position: relative;
    }
    
    .goods-header-item-action::after {
    }
    .extraPosition{
        position: absolute;
        right: -5rpx;
        top: -10rpx;
        font-size: 20rpx;
        padding: 0rpx 10rpx;
        height: 28rpx;
        color: #ffffff;
        background-color: #dd514c;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .publish-goods-btn {
        width:160rpx;
        background: #e7612e;
        color: #FFFFFF;
        height: 54rpx;
        line-height: 54rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 82rpx;
        float:right;
        margin-right: 20rpx;
        margin-top: 20rpx;
    }
    
    .goodsNavContent{
        padding:0rpx 20rpx;
    }
    
    .charts {
        width: 750upx;
        height: 400upx; // 修改为400upx
        background-color: #FFFFFF;
        left: 0px;;
		width: 100%;
    }
     /* 新增部分：让.charts-box左右居中 */
    .charts-box {
        margin: 0 auto;
    }
	.float-btn {
	    position: fixed;
	    right: 20rpx;
	    bottom: 20rpx;
	    background-color: #4372fe;
	    color: white;
	    padding: 10rpx 20rpx;
	    border-radius: 10rpx;
	    z-index: 999;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	.float-btn-text {
	    font-size: 28rpx;
	}
</style>